<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p10_固定定位遮罩层</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,0.3);
            /* 固定定位以html视口（view port）为参照物，
                紧贴四个边，实现撑满全屏的效果*/
            position: fixed;
            top:0;
            bottom: 0;
            left:0;
            right:0;
        }

    </style>
</head>
<body>
    <div class="mask"></div>
    <div>
<!--  lorem*60  Tab自动补全  -->
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci aliquam, consectetur
            deleniti laudantium magni minus officia perferendis perspiciatis quasi quidem quo, sequi sint sit ut veniam
            vero voluptate voluptatum!
        </div>
        <div>Aperiam deleniti distinctio dolores esse fugiat impedit iure iusto libero maxime nihil nisi perspiciatis
            porro possimus quae, quia reprehenderit sapiente suscipit. Ipsa magni minima neque nesciunt omnis optio
            porro, ut!
        </div>
        <div>Adipisci blanditiis, corporis, culpa cum cupiditate deserunt dicta enim error harum in magni maiores
            mollitia neque nesciunt nisi non perferendis porro quam quos rem sed sequi sint soluta vel veniam.
        </div>
        <div>Aliquam beatae blanditiis deserunt dignissimos dolorem est laudantium quia rerum tempore voluptatem?
            Accusantium aliquam deserunt ea fugiat illo iure maxime porro rem voluptate. Cum illo incidunt inventore
            laboriosam quisquam ratione?
        </div>
        <div>Ab accusamus accusantium adipisci aliquam aperiam autem beatae blanditiis consequatur consequuntur culpa
            deleniti earum eius eveniet facere inventore minus molestiae placeat provident quam, qui quis repellendus
            totam vel voluptates voluptatibus.
        </div>
        <div>Alias aliquid atque dolorem, doloribus hic, iusto laboriosam laborum minus quis saepe sit totam voluptatum?
            Accusantium, adipisci architecto asperiores aut, consequatur consequuntur dignissimos dolore ea fugit porro
            quis reprehenderit sunt!
        </div>
        <div>Accusantium aliquid animi aut autem debitis earum explicabo id itaque, minima nobis quaerat quidem quo
            reiciendis, sit tenetur voluptas voluptate! Esse eum eveniet fugiat iusto, porro provident quisquam quod
            sunt.
        </div>
        <div>Accusamus adipisci aspernatur assumenda atque dignissimos dolore ea eos est fugiat impedit ipsum iste
            libero maiores, minima natus nisi officia provident quaerat quasi ratione reiciendis, repellat repudiandae
            sed vel vitae.
        </div>
        <div>Ad adipisci amet asperiores consequatur cumque dignissimos dolores doloribus est impedit incidunt nam nemo
            nisi officia optio, porro quia quos reiciendis repellat repudiandae similique sint suscipit tempore ullam.
            Repellendus, tenetur!
        </div>
        <div>Delectus est incidunt praesentium quisquam quod ut velit voluptates! Consectetur eligendi error labore
            molestias quibusdam, quisquam veritatis. Adipisci aliquid est harum hic magnam provident temporibus vero.
            Dolorum pariatur provident quis!
        </div>
        <div>Cupiditate eos facilis laudantium magni nostrum officia recusandae rem similique. Accusantium ad asperiores
            at cumque deleniti, doloremque ea enim error fugit nam nemo perferendis quos, sequi tenetur unde velit
            vitae.
        </div>
        <div>Eum natus odit porro totam voluptate. Consectetur culpa cumque dolore, ea eaque earum eius est, ex
            exercitationem labore modi numquam omnis porro, possimus qui quod repellat totam unde veniam voluptates.
        </div>
        <div>Aut earum eveniet quae temporibus voluptatem. Aperiam consequatur dolore error esse fugit impedit
            inventore, ipsam iste, magni non praesentium, quasi quidem quis recusandae totam vitae voluptatibus. At illo
            iure quod.
        </div>
        <div>Aliquam autem consectetur dolorem doloremque ea, eaque, ex magnam mollitia officiis pariatur provident quod
            rem similique sunt, tenetur veniam vero. Doloribus eius ex iure modi nam, numquam quam quo voluptate.
        </div>
        <div>Accusamus adipisci aspernatur assumenda at beatae corporis dicta dolores ea eos fuga incidunt magni nihil
            nobis numquam, obcaecati porro quaerat quasi qui quia quo rerum sit sunt tempore! Obcaecati, vitae.
        </div>
        <div>Adipisci asperiores aspernatur, aut cum debitis distinctio doloribus fugiat illo in ipsam iusto laborum
            natus nisi nobis officia omnis possimus provident quae quis reiciendis, repellendus sed similique sunt
            veritatis voluptate.
        </div>
        <div>Ad, alias cupiditate est ipsa nesciunt quae suscipit! Alias aperiam debitis ducimus facilis maxime qui quo
            rerum sapiente sequi tempora! Deserunt eius explicabo necessitatibus porro repellat soluta velit! Cum,
            impedit?
        </div>
        <div>A aliquid asperiores, debitis delectus doloremque dolores enim, itaque magnam molestias necessitatibus
            nulla officia provident quasi, repellendus sapiente? Aperiam cumque doloremque eius est et id ipsum
            laudantium molestias nemo similique.
        </div>
        <div>Aliquam amet aperiam doloremque eos excepturi expedita fugit illum, nostrum perferendis quae quaerat, quod.
            Consequatur deserunt dignissimos distinctio eaque eos, eum, exercitationem quaerat reprehenderit sint sit
            sunt vitae, voluptates voluptatum.
        </div>
        <div>Aliquam aperiam architecto consequatur, corporis eveniet fuga illo ipsa, modi necessitatibus numquam
            officia quibusdam, repellendus sapiente sint suscipit tempora unde vero voluptate? A aut blanditiis, ex
            facere quo rem voluptas?
        </div>
        <div>Consectetur culpa cupiditate debitis ducimus eveniet facere laborum repellendus tempore tenetur velit! Amet
            dignissimos exercitationem fugit harum minima quia rerum? Est illum itaque magni molestias numquam quae
            recusandae vitae voluptates.
        </div>
        <div>Aut blanditiis expedita fugit libero porro provident suscipit voluptates? Architecto assumenda, delectus
            dolor dolorem doloribus enim nisi temporibus voluptas. Commodi dolor eos error excepturi harum ipsum
            perferendis quidem repellat ut.
        </div>
        <div>Atque cumque cupiditate facilis fugit harum illo minus molestiae placeat quisquam voluptatibus! Animi
            deserunt ducimus eveniet id laudantium modi nemo nisi saepe unde vel. Nihil non quasi rerum ut veritatis.
        </div>
        <div>A aliquam aperiam blanditiis debitis deserunt dignissimos dolorum fugiat nihil officia ratione recusandae
            soluta unde, ut! Laborum quis, ut. Aperiam debitis doloremque ea fuga illo nihil nobis officiis possimus
            recusandae.
        </div>
        <div>A accusantium animi atque commodi consequatur earum eius ex harum in inventore ipsam laborum magnam numquam
            officiis, omnis perspiciatis possimus provident quod quos repudiandae saepe sunt ut veritatis voluptas
            voluptatum.
        </div>
        <div>Aliquam doloribus eligendi illum ipsam ipsum nam nihil nulla pariatur quasi quidem quo ratione sapiente
            sequi ut, voluptatem! Amet atque consequatur dignissimos dolorum expedita facere magnam nemo nulla
            recusandae, suscipit?
        </div>
        <div>Atque culpa est explicabo ipsa ipsum libero odit possimus quae quisquam reiciendis. Consectetur, ex
            voluptatibus? Consequuntur culpa cupiditate doloremque eaque explicabo, illum, maxime minus molestiae, nihil
            odit officia perspiciatis rem.
        </div>
        <div>Ad atque autem consequatur doloribus ducimus error excepturi facere fuga fugiat harum illum iusto magni nam
            necessitatibus nesciunt non perferendis quia, recusandae repellat similique tempore velit veniam veritatis.
            Facilis, iure.
        </div>
        <div>Accusamus accusantium alias at cupiditate eius expedita maiores nam, nisi non quasi quibusdam vel
            voluptatem. Eius numquam odit officiis quasi quos voluptate! Aliquid aspernatur iste maxime molestiae nulla
            omnis recusandae.
        </div>
        <div>Ad aliquam architecto at dignissimos dolorum ea eos eveniet, expedita facilis fugit in inventore iusto
            magni, nihil, omnis perspiciatis placeat quia ratione reprehenderit sapiente sit ullam vel veritatis!
            Necessitatibus, repudiandae?
        </div>
        <div>Ad, asperiores aspernatur delectus deserunt dolore eum neque placeat porro quasi voluptate? Adipisci alias
            aliquam assumenda beatae blanditiis cupiditate dolorem earum explicabo, minima minus nobis pariatur placeat,
            sapiente, vero voluptatibus?
        </div>
        <div>A alias aliquid assumenda aut consectetur culpa, cumque delectus deleniti dignissimos distinctio dolorem
            dolores ducimus eius eos eum ex facere illum maxime molestiae officiis possimus quia ratione repellendus
            rerum veritatis!
        </div>
        <div>Architecto atque cum ipsa obcaecati quo reprehenderit voluptatibus. Amet commodi error maxime velit vitae!
            Adipisci asperiores cum cumque, deleniti dolor eos exercitationem libero neque quibusdam soluta ullam vel
            veritatis? Aut!
        </div>
        <div>Aliquam cumque doloremque doloribus ex exercitationem facere fugiat in ipsa laudantium, magnam minus
            nesciunt nobis optio pariatur provident quas recusandae reprehenderit saepe sit totam ullam, velit vitae
            voluptate voluptatem voluptatum.
        </div>
        <div>Ab animi, atque deserunt earum illo illum incidunt ipsa iste pariatur saepe. Deleniti, deserunt doloribus
            error esse eum explicabo iste magnam modi quaerat qui quidem rerum sed suscipit ullam veritatis.
        </div>
        <div>Accusamus delectus eaque excepturi exercitationem iure mollitia nostrum, numquam quibusdam totam velit.
            Autem, eos eveniet ex explicabo fuga hic minus tenetur! Aliquid culpa, dolorum eaque illum laudantium nihil
            quas repudiandae?
        </div>
        <div>Alias aliquam aut autem culpa dolore doloremque, dolores ea hic iure nam quam repellendus reprehenderit
            unde veritatis voluptates. Aspernatur laboriosam nostrum saepe veritatis! Architecto corporis dolor iure vel
            velit voluptatum.
        </div>
        <div>Amet, aspernatur autem cupiditate delectus eius, enim facere iste itaque neque obcaecati porro quo,
            sapiente voluptate. Consequuntur corporis iste libero minima possimus qui repellat. Adipisci dolor dolorem
            in odio perspiciatis?
        </div>
        <div>Aliquam cum cupiditate ea expedita id impedit maiores, molestiae, porro, qui quis ratione rem sunt unde! A
            ex perspiciatis vero voluptate! Asperiores debitis id illo illum libero quidem, quod sed?
        </div>
        <div>Aperiam eligendi illum laborum maxime obcaecati porro vitae. Aperiam architecto blanditiis consequuntur
            deserunt eos ex iure minima nobis nulla numquam, pariatur quae qui quia quibusdam sunt suscipit veritatis?
            Assumenda, eum.
        </div>
        <div>Alias aspernatur assumenda cumque est expedita iure libero, nesciunt porro provident qui quidem voluptate?
            Cum debitis delectus eveniet excepturi exercitationem, facere, fugit, illo necessitatibus omnis reiciendis
            saepe sit ut vero.
        </div>
        <div>Ab aliquid blanditiis deserunt doloribus ea enim, error, et impedit iure magni maxime modi, molestiae nihil
            nobis odio repellendus tempore tenetur voluptatibus. Animi corporis nihil perferendis possimus quas quis
            velit.
        </div>
        <div>Alias aliquam delectus dolor doloremque facilis iusto, laborum obcaecati odit officia perspiciatis
            reiciendis voluptatum. Delectus dignissimos doloremque dolorum laudantium maiores nam nisi quas qui sunt
            velit. Cupiditate reprehenderit soluta voluptas!
        </div>
        <div>Eveniet fugit id libero natus perspiciatis quasi quidem quisquam tempora! Aperiam, at distinctio doloribus
            eos, eum explicabo ipsam laboriosam maiores molestiae odit optio perspiciatis placeat quod soluta vitae,
            voluptas voluptatibus.
        </div>
        <div>Impedit maiores maxime omnis. Accusantium amet consectetur corporis cumque cupiditate debitis dicta,
            doloribus est expedita illum, impedit ipsam ipsum labore nihil non optio perspiciatis quaerat repellat sit
            soluta suscipit ut.
        </div>
        <div>Ab accusamus ad adipisci animi asperiores, aspernatur, at atque autem culpa cum cupiditate delectus dolore
            eligendi enim eveniet facere harum in incidunt ipsam magni pariatur quas quos saepe sequi, similique?
        </div>
        <div>Accusantium corporis doloribus itaque libero non odio officiis, quam ullam. Aut cumque delectus eligendi
            explicabo fugit itaque laboriosam minima non officiis quasi quibusdam, quo quos reprehenderit saepe suscipit
            unde voluptate.
        </div>
        <div>Error hic maiores quaerat quas. Architecto aspernatur consequuntur eaque tenetur vitae? Corporis debitis
            eius, eligendi excepturi hic iure iusto magni maxime natus nulla officia placeat possimus reiciendis
            repellat repellendus vel?
        </div>
        <div>Asperiores blanditiis praesentium ullam veritatis! Alias beatae blanditiis commodi delectus ducimus eius,
            esse est exercitationem fugiat fugit in minima modi nobis pariatur quasi quia quod reiciendis reprehenderit
            saepe sed ut?
        </div>
        <div>Aspernatur, et velit? A aliquam assumenda dicta dignissimos, doloremque eveniet excepturi, expedita ipsa
            nam neque nostrum tempora ut. Commodi consequuntur deserunt doloremque dolores dolorum ea expedita laborum
            odio, ratione sapiente.
        </div>
        <div>Aperiam fugiat inventore nesciunt, qui quia repudiandae? Amet aspernatur blanditiis dolores, dolorum fugiat
            minus molestiae non omnis repellat similique. Ad dicta ipsa laboriosam obcaecati recusandae. Atque neque
            numquam quod soluta.
        </div>
        <div>Accusantium autem, culpa distinctio excepturi facilis in ipsum laboriosam nobis porro soluta. Accusantium
            architecto corporis cum cupiditate delectus doloribus ipsum, iste mollitia, nesciunt optio ratione sed
            suscipit ullam. Ab, facere!
        </div>
        <div>Ab consequatur enim est eum ex necessitatibus perspiciatis, quas repellendus sed temporibus velit, vitae. A
            alias aliquam atque beatae delectus doloremque hic inventore labore repudiandae veniam! Fugit qui quibusdam
            rerum?
        </div>
        <div>Aut commodi, consectetur et id illo pariatur. Atque, esse in itaque modi odit porro quam vel! Accusantium
            amet aut cupiditate doloribus harum iste quisquam rem sit suscipit tenetur, vel voluptatem.
        </div>
        <div>Blanditiis reprehenderit repudiandae sunt veniam vitae! Ab amet dolorum ducimus eligendi explicabo facilis
            incidunt ipsa, laborum magnam, obcaecati pariatur possimus provident recusandae repellendus sit veritatis
            voluptatem. Aspernatur assumenda eaque porro.
        </div>
        <div>Animi, corporis dolore ducimus enim eos expedita in, incidunt ipsam nihil nulla numquam praesentium, qui
            quidem ratione rem reprehenderit sapiente sed sequi temporibus voluptatibus! Aspernatur dignissimos ducimus
            explicabo illo repellendus.
        </div>
        <div>Aperiam at consequatur ea error fuga nulla quos repellendus? Ad adipisci asperiores, debitis dignissimos
            ducimus earum incidunt iure labore numquam quia quod repellat saepe tempora. Eum illum nam officia ratione?
        </div>
        <div>Dolorem dolorum ipsa officiis pariatur. Aperiam dolorum ducimus error magnam necessitatibus obcaecati porro
            quod. Aliquid aperiam debitis, eius iste nam natus nobis suscipit veritatis? Deserunt libero quo repudiandae
            veniam veritatis.
        </div>
        <div>Cumque maiores molestias nobis similique ullam. Aspernatur aut autem deserunt dicta dolorem facilis id in
            incidunt iure, laudantium non numquam obcaecati odit quidem quod, sapiente similique soluta tempore vitae
            voluptates?
        </div>
        <div>A ad aliquid consequatur cumque distinctio eum eveniet fugiat, iusto laboriosam laudantium magni molestias
            nam nisi odio officia provident, quasi quisquam recusandae rem sed, sequi sunt tempora temporibus ullam vel?
        </div>
    </div>
</body>
</html>